<template>
  <el-dialog :title="title" v-model="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="500px">
    <el-form size="small" :model="ruleForm" :rules="rules" ref="formRef" label-width="100px" class="demo-ruleForm">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="商品封面图" prop="coverImgPath">
        <div>
          <el-button type="primary" @click="openUpload('cover')">上传图片</el-button>
          <img :src="ruleForm.coverImgPath" class="mt10" :width="120" v-if="ruleForm.coverImgId != ''" />
          <div class="gray9">建议尺寸300*300,大小不超过2M</div>
          <!--上传图片组件-->
          <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload>
        </div>
      </el-form-item>

      <el-form-item label="价格类型" prop="priceType">
        <el-radio-group v-model="ruleForm.priceType">
          <el-radio :label="1">一口价</el-radio>
          <el-radio :label="2">价格区间</el-radio>
          <el-radio :label="3">折扣价</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="价格：" v-if="ruleForm.priceType == 1" prop="price">
        <el-input type="textarea" min="0" v-model="ruleForm.price" class="mb16 max-w460" placeholder="请输入价格">
        </el-input>
      </el-form-item>

      <el-form-item label="价格：" v-if="ruleForm.priceType == 2" prop="price">
        <el-input type="textarea" min="0" v-model="ruleForm.price" class="mb16 max-w460" placeholder="请输入最低价格"
          prop="price" :rules="[{ required: true, message: '请输入最低价格', trigger: 'change' }]"></el-input>
        <el-input type="textarea" min="0" v-model="ruleForm.price2" class="mb16 max-w460" placeholder="请输入最高价格"
          :rules="[{ required: true, message: '请输入最高价格', trigger: 'change' }]"></el-input>
      </el-form-item>

      <el-form-item label="价格：" v-if="ruleForm.priceType == 3" prop="price">
        <el-input type="textarea" min="0" v-model="ruleForm.price" class="mb16 max-w460" placeholder="请输入原价"
          :rules="[{ required: true, message: '请输入原价', trigger: 'change' }]"></el-input>
        <el-input type="textarea" min="0" v-model="ruleForm.price2" class="mb16 max-w460" placeholder="请输入现价"
          :rules="[{ required: true, message: '请输入现价', trigger: 'change' }]"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="openProduct()">绑定商品</el-button>
      </el-form-item>
      <el-form-item v-if="ruleForm.productId != ''">{{ ruleForm.productName }}</el-form-item>
      <el-form-item>
        <img :src="ruleForm.productImgPath" class="mt10" :width="120" v-if="ruleForm.productImgId != ''" />
      </el-form-item>
    </el-form>
    <template #footer></template>
    <div class="dialog-footer">
      <el-button size="small" @click="close">取 消</el-button>
      <!-- <el-button @click="resetForm('formRef')">重置</el-button> -->
      <el-button type="primary" @click="submitForm('formRef')" :loading="loading">立即提交</el-button>
    </div>

    <!--商品选择-->
    <Product :isproduct="isproduct" :excludeIds="exclude_ids" :islist="false" @closeDialog="closeProductFunc">
    </Product>
  </el-dialog>
</template>

<script>
  import wxLiveApi from '@/api/wxlive.js';
  import Upload from '@/components/file/Upload.vue';
  import Product from '@/components/product/Product.vue';

  export default {
    components: {
      /*图片上传*/
      Upload: Upload,
      /*选择商品*/
      Product: Product
    },

    data() {
      return {
        title: "添加直播商品",
        ruleForm: {},
        isupload: false,

        coverImgPath: '',
        shareImgPath: '',
        feedsImgPath: '',
        productImgPath: '',
        productName: '',

        rules: {
          name: [{
              required: true,
              message: '请输入商品名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 17,
              message: '长度在 3 到 17 个字符',
              trigger: 'blur'
            }
          ],
          coverImgPath: [{
            required: true,
            message: '请选择图片',
            trigger: 'change'
          }],
          
          price: [{
            required: true,
            message: '请输入价格',
            trigger: 'change'
          }]
        },

        /*是否加载完成*/
        loading: false,

        /*是否打开选择商品*/
        isproduct: false,
        /*已有的id*/
        exclude_ids: [],

        /*左边长度*/
        formLabelWidth: '120px',
        /*是否显示*/
        dialogVisible: false
      };
    },
    created() {},

    methods: {

      settingDefine(){
        this.ruleForm = {
          priceType: 1,
        };
      },
      open(row) {
        this.title = "添加直播商品"
        this.settingDefine();
        if (row && row.appProductId) {
          this.title = "编辑直播商品"
          this.ruleForm = row;
        }
        this.dialogVisible = true;
      },
      close() {
        this.resetForm('formRef');
        this.dialogVisible = false;
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      submitForm(formName) {
        let self = this;
        self.$refs[formName].validate(valid => {
          if (valid) {
            let param = self.ruleForm;
              if(param && param.appProductId){
                wxLiveApi.editProduct(param,true).then(data => { 
                ElMessage({
                  message: '编辑成功',
                  type: 'success'
                });
                this.dialogVisible = false;
                this.$emit("get-table-list")
              });
            }else{
              wxLiveApi.addProduct(param,true).then((data) => {
                ElMessage({
                  message: '创建成功',
                  type: 'success'
                })
                this.dialogVisible = false
                this.$emit("get-table-list")
              })
            }
          } else {
            return false;
          }
        });
      },
      /*上传*/
      openUpload(e) {
        this.type = e;
        this.isupload = true;
      },

      /*关闭商品选择*/
      closeProductFunc(e) {
        this.ruleForm.productId = e.params.productId;
        this.ruleForm.productImgPath = e.params.imagePath;
        this.ruleForm.productName = e.params.productName;
        this.isproduct = false;
      },

      /*关闭弹窗*/
      cancelFunc(e) {
        this.$emit('close', {
          type: 'error'
        });
      },

      /*打开添加*/
      openProduct() {
        this.isproduct = true;
      },
      
      /*上传图片*/
      uploadFile(fileId) {
        let self = this;
        const loading = ElLoading.service({
          lock: true,
          text: '文件上传中,请等待',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        wxLiveApi.uploadFile({ fileId },err=>{
          loading.close();
        })
          .then(response => {
            loading.close();
            ElMessage({
              message: '上传文件至微信成功',
              type: 'success'
            });
          })
          .catch(response => {
            loading.close();
          });
      },

      /*获取图片*/
      returnImgsFunc(e) {
        if (e != null && e.length > 0) {
          this.ruleForm.coverImgPath = e[0].filePath;
          this.ruleForm.coverImgId = e[0].fileId;
          this.uploadFile(this.ruleForm.coverImgId)
        }
        this.isupload = false;
      }
    }
  };
</script>

<style>
  .img {
    margin-top: 10px;
  }
</style>
